<template>
	<div class="design-box" @click="onSelect(config)" :style="_styleConfig(config)" draggable="true"
		@mousedown="Move($event)">
		<div class="anchor-box" v-if="showPoint">
			<div class="design-box-anchor" :ref="item" v-for="(item,index) in point" :key="index"
				:style="_anchorPoint(item)" draggable="true" @dragstart="dragstart($event, item)"
				@drag="drag($event, item)" @dragend="dragend($event, item)" @dragover.prevent />
		</div>
		<div class="design-content">
			<slot></slot>
		</div>
	</div>
</template>

<script>
	export default {
		name: "DesignBox",
		props: {
			config: {
				type: Object,
				required: false
			},
			showPoint: {
				type: Boolean,
				required: false,
				default: false
			}
		},
		data() {
			return {
				point: ['topRight', 'topLeft', 'bottomRight', 'bottomLeft'],
			}
		},
		methods: {
			Move(event) {
				console.log(event)

			},
			dragStart(event) {
				event.preventDefault();
				console.log(event, 'start')

			},
			dragIng(event) {
				event.preventDefault();
				console.log(event, 'start')

			},
			drag(event, data) {
				// event.preventDefault();
				console.log(event, data, 'ing')

			},
			dragstart(event, data) {
				event.preventDefault();
				console.log(event, data, 'start')

			},
			dragend(event, data) {
				console.log(event, data, 'end')
			},
			onSelect(data) {
				this.$emit("select", data)
			},
			_styleConfig(config) {
				return {
					width: `${config.width}px`,
					height: `${config.height}px`,
					top: `${config.top}px`,
					left: `${config.left}px`,
				}
			},
			_anchorPoint(name) {
				if (name == "topLeft") {
					return {
						top: 0,
						left: 0,
						transform: `translate(-50%,-50%)`,
						cursor: `nw-resize`
					}
				} else if (name == "topRight") {
					return {
						top: 0,
						right: 0,
						transform: `translate(50%,-50%)`,
						cursor: `ne-resize`
					}
				} else if (name == "bottomLeft") {
					return {
						bottom: 0,
						left: 0,
						transform: `translate(-50%,50%)`,
						cursor: `ne-resize`
					}
				} else if (name == "bottomRight") {
					return {
						bottom: 0,
						right: 0,
						transform: `translate(50%,50%)`,
						cursor: `se-resize`
					}
				}
			}
		}
	}
</script>

<style scoped lang="scss">
	.active {
		border: 1px solid #409eff;
	}

	.design-box {
		position: absolute;
		box-sizing: border-box;


		.anchor-box {
			position: absolute;
			width: 100%;
			height: 100%;
			box-sizing: border-box;
			border: 1px solid #409eff;
		}

		.design-box-anchor {
			position: absolute;
			width: 4px;
			height: 4px;
			background: #fff;
			border: 1px solid #409eff;
		}
	}


	.design-content {
		width: 100%;
		height: 100%;
	}
</style>
